<template>
  <view class="home-page page2" :style="{ backgroundImage: `url(${baseUrl}/images/bg-3.png)` }">
    <view class="logo">
      <image src="/reservation-images/logo.svg" mode="widthFix"></image>
    </view>
    <!-- 内容 -->
    <view class="title"> 环节介绍 </view>
    <view class="desc">
      见证一滴牛奶华丽变身为奶粉的全过程， 了解高品质产品背后的科学知识
    </view>
    <!-- 轮播图 -->
    <swiper class="swiper" :circular="true" previous-margin="90rpx" next-margin="90rpx" :current="current"
      @change="handleChange">
      <block v-for="(item, index) in list" :key="index">
        <swiper-item>
          <view class="swiper-item">
            <view class="swiper-item-box blur-bg" :class="current === index ? 'swiper-item-active' : ''">
              <image class="" :src="item.image" mode="scaleToFill" />
            </view>
          </view>
        </swiper-item>
      </block>
    </swiper>
    <!--  -->
    <view class="sub-title"> {{ list[current].title }} </view>
    <view class="desc" style="width: 450rpx">
      {{ list[current].desc }}
    </view>
  </view>
</template>

<script setup>
import { baseUrl } from '@/reservation/config'
import { ref } from 'vue'
import s1 from '@/reservation-images/s-1.png'
import s2 from '@/reservation-images/s-2.png'

defineOptions({
  name: 'page3',
})

const current = ref(0)
const list = ref([
  {
    image: s1,
    title: '寓教于乐的互动体验',
    desc: '显微镇观察实验、冰淇淋DIY、手工奶片DIY、 牛奶「烟花」等',
  },
  {
    image: s2,
    title: '冰淇淋DIY',
    desc: '寓教于乐的互动体验,冰淇淋DIY、手工奶片DIY、 牛奶「烟花」',
  },
  {
    image: s1,
    title: '手工奶片DIY、 牛奶',
    desc: '冰淇淋DIY',
  },
])

const handleChange = (e) => {
  current.value = e.detail.current
}
</script>

<style lang="less" scoped>
@import './index.less';
</style>
